<template>
  <div class="big-order-card">
    <!-- 标题 + Tabs -->
    <div class="header">
      <div class="title">📊 大单占比</div>
      <div class="tabs">
        <el-button
          v-for="t in tabs"
          :key="t.value"
          size="small"
          :type="activeTab === t.value ? 'primary' : 'default'"
          round
          @click="activeTab = t.value"
        >
          {{ t.label }}
        </el-button>
      </div>
    </div>

    <!-- 环形图 -->
    <div ref="chartRef" class="chart"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref, watch } from 'vue';

const chartRef = ref(null);
let chart: any = null;

const tabs = [
  { label: '本周', value: 'week' },
  { label: '本月', value: 'month' },
  { label: '团队', value: 'team' }
];
const activeTab = ref('week');

const renderChart = () => {
  if (!chartRef.value) return;
  if (!chart) {
    chart = echarts.init(chartRef.value);
  }

  const option: echarts.EChartsOption = {
    tooltip: { trigger: 'item' },
    legend: {
      show: true,
      bottom: 0,
      data: ['大单量', '普通单']
    },
    series: [
      // 内圈：总单量
      {
        name: '总单量',
        type: 'pie',
        radius: ['0%', '55%'],
        center: ['50%', '45%'],
        silent: true,
        label: {
          show: true,
          position: 'center',
          formatter: () => {
            const total = 52096.4 + 78144.6;
            return `{b|总单量(元)}\n{c|${total.toFixed(1)}}`;
          },
          rich: {
            b: {
              fontSize: 14,
              color: '#999',
              lineHeight: 20
            },
            c: {
              fontSize: 18,
              fontWeight: 'bold',
              color: '#333',
              lineHeight: 24
            }
          }
        },
        labelLine: { show: false },
        data: [{ value: 1, name: '总单量' }],
        itemStyle: { color: 'transparent' }
      },
      // 外圈：实际占比
      {
        name: '订单占比',
        type: 'pie',
        radius: ['60%', '80%'],
        center: ['50%', '45%'],
        label: {
          show: true,
          position: 'outside',
          formatter: (params: any) => {
            return `{b|${params.percent}%}\n{c|${params.value}}`;
          },
          rich: {
            b: {
              fontSize: 12,
              color: '#666',
              lineHeight: 18
            },
            c: {
              fontSize: 13,
              fontWeight: 600,
              color: '#333',
              lineHeight: 20
            }
          }
        },
        labelLine: {
          show: true,
          length: 20,
          length2: 15
        },
        data: [
          { value: 52096.4, name: '普通单', itemStyle: { color: '#3b82f6' } },
          { value: 78144.6, name: '大单量', itemStyle: { color: '#ef4444' } }
        ]
      }
    ]
  };

  chart.setOption(option);
};

onMounted(() => {
  renderChart();
  window.addEventListener('resize', () => chart?.resize());
});

watch(activeTab, () => {
  renderChart();
});
</script>

<style lang="scss" scoped>
.big-order-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 18px;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  height: 100%;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tabs {
  display: flex;
  gap: 8px;
}

.chart {
  width: 100%;
  height: 260px;
}

/* 优化后的数据展示：网格布局 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.stat-card {
  background: #f8fafc;
  padding: 12px 14px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.stat-card:hover {
  background: #f1f5f9;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.stat-label {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 4px;
}

.stat-content {
  display: flex;

  .stat-value {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 6px;
  }

  .stat-trend {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .stat-trend .icon {
    font-style: normal;
    font-size: 14px;
  }

  .stat-trend.up {
    color: #16a34a;
  }

  .stat-trend.down {
    color: #dc2626;
  }

  .stat-trend span {
    color: #6b7280;
  }
}
</style>
